<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="群聊" showBack :showRight="false"></free-nav-bar>
		
		<free-list-item v-for="item in list" :key="item.id" :title="item.name"
		:cover="item.avatar || '/static/images/userpic.png'" @click="handle(item)"
		:showRight="true"></free-list-item>
		
		
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-4 bg-light" v-if="list.length >= 10">
			<text class="text-muted font">{{loadmore}}</text>
		</view>
		
		
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import $H from '@/common/free-lib/request.js'
	import auth from "@/common/mixin/auth.js"
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				page:1,
				loadmore:"上拉加载更多",
				list:[]
			}
		},
		mixins:[auth],
		onLoad(e) {
		
		},
		methods: {
			handle(item){
				uni.navigateTo({
					url: '/pages/chat/chat?params='+encodeURIComponent(JSON.stringify({
						id: item.id,
						name: item.name,
						avatar: item.avatar,
						chat_type: "group"
					}))
				});
			}
		},
		computed:{
			
		},
		onShow() {
			this.page = 1
			this.$store.dispatch('getApply', this.page)
			this.loadmore = '上拉加载更多'
			$H.get('/group/'+ this.page).then(res=>{
				this.list = res
			})
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.page = 1
			$H.get('/group/'+ this.page).then(res=>{
				this.list = res
				uni.showToast({
					title: '刷新成功',
					icon:"none"
				});
				uni.stopPullDownRefresh()
				this.loadmore = '上拉加载更多'
			})
		},
		// 监听触底事件
		onReachBottom() {
			if(this.loadmore !== '上拉加载更多') return;
			this.loadmore = '加载中...'
			this.page++
			$H.get('/group/'+ this.page).then(res=>{
				this.list = [...this.list, ...res]
				this.loadmore = this.list.length == this.page * 10 ? '上拉加载更多' : '没有更多了'
				uni.showToast({
					title: '刷新成功',
					icon:"none"
				});
				uni.stopPullDownRefresh()
				this.loadmore = '上拉加载更多'
			}).catch(err=>{
				this.page--
				this.loadmore = '上拉加载更多'
			})
		},
		components:{
			freeNavBar,
			freeListItem
		}
	}
</script>

<style>

</style>
